<template>
  <div class="bill" ref="billWrapper">
    <gamelist :load-url="loadUrl" :no-flip="noFlip" type="bill"></gamelist>
    <nomore v-if="noMore"></nomore>
    <loading-full></loading-full>
    <back></back>
  </div>
</template>

<script type="text/ecmascript-6">
  import gamelist from '../../common/gamelist/gamelist'
  import back from '../../common/back/back'
  import nomore from '../../common/nomore/nomore'
  import LoadingFull from '../../common/loading-full/loading-full'
  import BScroll from 'better-scroll'

  export default {
    data() {
      return {
        loadUrl: '/game/index.php?m=Home&c=Api&a=getUserTrades',
        noFlip: true,
        noMore: false
      }
    },
    created() {
      this.$nextTick(() => {
        if (!this.giftScroll) {
          this.giftScroll = new BScroll(this.$refs.billWrapper, {
            click: true
          })
        } else {
          this.giftScroll.refresh()
        }
      })
    },
    mounted() {
      this.eventBus.$on('noMore', (status) => {
        this.noMore = status
      })
    },
    components: {
      gamelist,
      nomore,
      LoadingFull,
      back
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .bill
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #fff
    z-index 10
    overflow hidden
</style>
